﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HNCITY_Map.aspx.cs" Inherits="HNQXYJ.HN_Map.HNCITY_Map" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
    </script>
    <script src="../JS/BaiDuMap.js" type="text/javascript"></script>
    <script src="../JS/MaskLayer.js" type="text/javascript"></script>
     <link href="../CSS/Map.css" rel="stylesheet" type="text/css" />
    <link href="../CSS/MapPop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            //在左上角显示城市和县的列表
            $("#list").click(function () {
                $("#cityList").css("top", "34px").css("left", "2px").show();
                return false;
            });
            $("#closeCityList").click(function () {
                $("#cityList").hide();
                return false;
            });
            //点击城市名称回到初始的加载状态
            $("#HCity").click(function () {
                map.clearOverlays(); //先清除地图上原有的覆盖物
                loadOneCityAndCounty();
           
            });
            loadOneCityAndCounty();

            //点击终端 发送信息
            $("#send").click(function () {
                var phone = $("#phoneHidden").val();
                var msg = $("#sendMsg").val();
                var sendTimes = $("#sendTimes").val();
                if (msg == "" || msg.length < 3) {
                    alert("发送内容不能为空或太短");
                    return;
                }
                $.post("../BLL/TerminalAsh.ashx", { "sendaction": "sendMsg", "phone": phone, "sendMsg": msg, "sendTimes": sendTimes }, function (data, status) {
                    if (status == "success") {
                        if (data == "ok") {
                            alert("信息已经发出！");
                        }
                    }
                });
            });
        });

        //页面初始化的加载
        function loadOneCityAndCounty() {
            //获取一个城市对象将城市名填入左上角的列表框中
            $.post("../BLL/City.ashx", { "action": "GetOneCity" }, function (data, status) {
                if (status == "success") {
                    city = $.parseJSON(data);
                    $("#HCity").html(city.Name);
                    var lng = city.Lng;
                    var lat = city.Lat;
                    var selfCode = city.SelfCode;

                    createMap(lng, lat);
                    setMapEvent();
                    addMapControl();
                    getDataBoundary(city.Name);
                    loadCoutyOfCity(selfCode);
                }
            });
        }

        //加载一个城市的县的列表 同时给每个县添加标注
        function loadCoutyOfCity(selfCode) {
            $.post("../BLL/County.ashx", { "action": "GetCountyList", "cityCode": selfCode }, function (data, status) {
                if (status == "success") {
                    county = $.parseJSON(data);
                    window.county = county; //声明为全局变量
                    $("#countiesList").empty(); //清空县级列表
                    for (var i = 0; i < county.length; i++) {
                        var lng = county[i].Lng;
                        var lat = county[i].Lat;
                        var name = county[i].Name;
                        var selfCode = county[i].SelfCode;
                        var a = '<a href="#" flage="county"  name=' + name + '  lng= ' + lng + ' lat=' + lat + ' selfCode=' + selfCode + ' >' + county[i].Name + '</a>' + '     ';
                        $("#countiesList").append(a);
                        var point = new BMap.Point(lng, lat);
                        addMarkerCounty(point, i);
                    }

                    //点击每个县移动地图并添加边界
                    $("a[flage='county']").each(function () {
                        $(this).click(function () {
                            var lng = $(this).attr("lng");
                            var lat = $(this).attr("lat");
                            var name = $(this).attr("name");
                            var selfCode = $(this).attr("selfCode");
                            var point = new BMap.Point(lng, lat);
                            map.centerAndZoom(point, 12); //从新定位地图的中心
                            map.clearOverlays();
                            getDataBoundary(name); //取得每个县的边界
                            //添加该县终端的数据和标注
                            loadDataTerminalOfCounty(selfCode);
                           
                            return false;

                        });
                    });
                }
            });
        }

        //为一个城市中的县添加标注
        function addMarkerCounty(point,index) {
            var myIcon = new BMap.Icon("../images/redgoyellow.png", new BMap.Size(20, 31),
                                {
                                    anchor: new BMap.Size(10, 31), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowAnchor: new BMap.Size(10, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );

            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);
            window.marker = marker;

            //为标注添加鼠标滑过事件 统计该县的终端以及大屏的在线情况。
            marker.addEventListener("mouseover", function () {
                var selfCode = county[index].SelfCode;
                $.post("../BLL/TerminalAsh.ashx", { "action": "GetTerminalTongJiData", "selfCode": selfCode }, function (data, status) {
                    if (status == "success") {
                        var count = $.parseJSON(data);
                        window.count = count;
                        var detailInfo = '<div><table class="tongji" > <tr><td>' + county[index].Name + '</td><td>大喇叭</td><td>LED大屏</td></tr>' +
                                                       '<tr><td>总数</td><td>' + count[0] + '</td><td>' + count[3] + '</td></tr>' +
                                                       '<tr><td>在线</td><td>' + count[1] + '</td><td>' + count[4] + '</td></tr>' +
                                                       '<tr><td>离线</td><td>' + count[2] + '</td><td>' + count[5] + '</td></tr></talbe></div>';

                        var infoWindow = new BMap.InfoWindow();
                        infoWindow.setContent(detailInfo);
                        marker.openInfoWindow(infoWindow, map.getCenter()); //将marker用this代替的话，会出问题，找不到对应的this代表的对象

                    }
                });           
            });

            //为县级标注添加点击事件，点击某个县的标注进入该县境内并添加终端标注
            marker.addEventListener("click", function () {
                var selfCode = county[index].SelfCode;
                var name = county[index].Name;
                map.centerAndZoom(point, 12); //移动地图的同时放大
                map.clearOverlays();
                getDataBoundary(name);
                loadDataTerminalOfCounty(selfCode);//加载被点击的县的所有终端
            });

        }

        //获取一个县的所有终端数据
        function loadDataTerminalOfCounty(selfCode) {
            $.post("../BLL/TerminalAsh.ashx", { "action": "GetTerminalListByRankLevel", "selfCode": selfCode }, function (data, status) {
                if (status == "success") {
                    var terminal = $.parseJSON(data);
                    window.terminal = terminal;
                    for (var i = 0; i < terminal.length; i++) {
                        var lng = terminal[i].Lng;
                        var lat = terminal[i].Lat;
                        var point = new BMap.Point(lng, lat);
                        addMarkerTerminal(point, i);
                    }
                }
                else {
                    alert("数据加载失败");
                }
            });
        }

        //添加终端的标注和事件
        function addMarkerTerminal(point, index) {
            var img = "";
            if (terminal[index].Statuss == "在线" && terminal[index].Category == "0") {
                img = "../images/green.png";
            } else if (terminal[index].Statuss == "离线" && terminal[index].Category == "0") {
                img = "../images/red.png";
            } else if (terminal[index].Statuss == "离线" && terminal[index].Category == "1") {
                img = "../images/icon7.gif";
            } else if (terminal[index].Statuss == "在线" && terminal[index].Category == "1") {
                img = "../images/icon6.gif";
            }
            var myIcon = new BMap.Icon(img, new BMap.Size(20, 31),
                                {
                                    anchor: new BMap.Size(10, 31), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowAnchor: new BMap.Size(10, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );

            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);
            
            //给标注添加鼠标滑过事件
            marker.addEventListener("mouseover", function () {
                //alert(mapDataArray[0]);
                var infoWindow = new BMap.InfoWindow();
                var detailInfow = '<div>所在地：' + terminal[index].TownName + '<br/>气象信息员：' + terminal[index].Leader + '</div>';
                infoWindow.setContent(detailInfow);
                this.openInfoWindow(infoWindow, map.getCenter());
            });

            marker.addEventListener("click", function () {
                // 弹出遮罩层的信息发送框
                var phone = terminal[index].Phone;
                $("#phoneHidden").val(phone);
                var villageName = terminal[index].TownName;
                $("#villageName").val(villageName);
                ShowDiv('MyDiv', 'fade'); 
            });
        }

        //通过传入的区域名称画出该区域的行政边界
        function getDataBoundary(distictName) {
            var bdary = new BMap.Boundary();
            bdary.get(distictName, function (rs) {       //获取行政区域
                //  map.clearOverlays();        //清除地图覆盖物       
                var count = rs.boundaries.length; //行政区域的点有多少个
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 3, strokeColor: "#0000FF" }); //建立多边形覆盖物
                    ply.setFillColor();
                    map.addOverlay(ply);  //添加覆盖物
                    // map.setViewport(ply.getPath());    //调整视野         
                }
            });
        }
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="rtbg">
                <span id="list" style="cursor: pointer;">河南省
                    <img alt="" src="../images/icon1.gif" align="absmiddle" /></span><img src="../images/icon2.gif"
                        align="absmiddle" />终端在线<img src="../images/icon3.gif" align="absmiddle" />终端离线
                        <img src="../images/icon6.gif" align="absmiddle" />LED在线
                        <img src="../images/icon7.gif" align="absmiddle" />LED离线
            </td>
        </tr>
        <tr>
            <td>
                <div id="dituContent" style="width: 100%; height: 680px;">                
                </div> 
            </td>
        </tr>
    </table>
 <%--页面顶部结束--%>
    <%--城市列表显示框开始--%>
    <div id="cityList" style="display: none; position: absolute; z-index: 100;">
        <table width="300"  border="0" cellspacing="0" cellpadding="0" class="borbg">
            <tr>
                <td class="cslist" height="20px">
                    <span id="henan"><a href="#" id="HCity" >河南省</a> </span>
                    <img id="closeCityList" src="../images/icon5.gif" align="absmiddle">
                </td>
            </tr>
  
            <tr>
                <td height="20px" class="lb_mc">
                    <div id="countiesList">                      
                    </div>
                </td>
            </tr>
 
        </table>
    </div>
    <%--城市列表显示框结束--%>
    <%--弹出遮罩层和发送信息框 开始--%>
 <div id="fade" class="black_overlay">
 </div>
<div id="MyDiv" class="white_content" >
  <%--      <div style="text-align: right; cursor: default; height: 40px;">
           <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>--%>
         <table width="448" border="0" cellspacing="0" cellpadding="0" align="center" class="bg" >
            <tr>
                <td height="40" class="tpt">
                    <img src="../images/tpt.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="25" align="center">
                    <img src="../images/tline.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    村名：<input name="村名" id="villageName" type="text" class="bor" style="width: 335px;" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送内容：<span style="font-size: 12px; color: #FF0000">（字数不超过350个)</span><br>
                    <%--<textarea  id="sendMsg" name="textarea" rows="" cols="" class="bor2" ></textarea>--%>
                    <asp:TextBox ID="sendMsg" runat="server" class="bor2" TextMode="MultiLine" MaxLength="350"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送次数：<%--<input id="sendTimes" name="sendTimes" type="text" size="3" class="bor" />--%>
                    <asp:TextBox ID="sendTimes" runat="server" size="3" class="bor" Text="1"></asp:TextBox>
                    次
                </td>
            </tr>
            <tr>
                <td height="60" align="center">
                    <img src="../images/tqx.gif" alt="" onclick="CloseDiv('MyDiv','fade')" />&nbsp;&nbsp;&nbsp;&nbsp;<img id="send" src="../images/tfs.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="20">
                </td>
            </tr>
        </table>
       <input type="hidden" id="phoneHidden" />
        
 </div>
 <%--弹出遮罩层和发送信息框 结束--%>
 
    </form>
</body>
</html>
